<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <student></student>
    <hr/>
    <school></school>
    <hr/>
    <global-component></global-component>
    </div>
  </div>
  <hr/><hr/><hr/><hr/><hr/><hr/>
  <div id="root2">
    <student></student>
    <hr/>
    <school></school>
    <hr/>
    <global-component></global-component>
  </div>
  </div>

  <script type="text/javascript">


    /*
    * 组件的基本写法:
    *   第一种写法:(kebab-case命名):my-school
    *   第二种写法:(CamelCase命名):MySchool()需要vue脚手架支持
    * 备注:可使用name属性 配置指定组件在开发者工具中的呈现形式
    *
    * 组件简写方式:
    *   const student = Vue.extend(options) 简写为 const student = options
    *
    *
    * */

    //第一步,创建组件
    const student = Vue.extend({
      template:`
        <div>
          <h2>学生姓名:{{name}}</h2>
          <h2>学生年龄:{{age}}</h2>
        </div>
      `,
      data(){
        return {
          name:'张三',
          age:'29'
        }
      }

    });

    const school =   Vue.extend({
      template:`
        <div>
          <h2>学校名称:{{name}}</h2>
          <h2>学校地址:{{address}}</h2>
        </div>
      `,
      data(){
        return {
          name:'二师',
          address:'高新二路'
        }
      }
    })

    const globalComponent =   Vue.extend({
      template:`
        <div>
          <h2>学校名称:{{name}}</h2>
        </div>
      `,
      data(){
        return {
          name:'hello',
        }
      }
    })

    Vue.component('global-component',globalComponent);
    //第二步注册局部组件
    var vm = new Vue({
      el:'#root',
      data:{

      },
      components:{
        student,school
      }
    });

    var vm2 = new Vue({
      el:'#root2',
      data:{

      },
      components:{
        student,school
      }
    });
  </script>
</body>
</html>
